<template>
    <div>
         <el-table
                :data="tableData"
                border
                stripe
                :span-method="arraySpanMethod"
                height="600"
                style="width: 100%"
              >
                <el-table-column
                  v-for="(item, index) in headerdata"
                  :key="index"
                  :fixed="item.fixed"
                  header-align="center"
                  align="center"
                  :prop="item.prop"
                  :label="item.label"
                  :width="item.width"
                >
                </el-table-column>
                 <el-table-column label="操作" width="150px">
                  <template slot-scope="scope">
                      <slot name="menu" v-bind:row="scope.row" v-bind:index="scope.$index"></slot>
                  </template>
                </el-table-column>
              </el-table>
               <div>
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentPage4:1
        }
    },
    props:{
      
       // 有分页时候显示的总条数
        total:{
            type:Number,
            default:()=>{
                return 0
            }
        },
        // 该组件是否需要显示分页
        pagination:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        tableData:{
          type:Array,
          default:()=>{
              return []
          }
        },
        headerdata:{
          type:Array,
          default:()=>{
              return []
          }
        },
    },
    methods:{
       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
         let _self = this;
          //  行合并
          // console.log(row)
          // console.log(rowIndex)
          // console.log(columnIndex)
          // console.log(_self.tableData[rowIndex -1])
          // let keys = Object.keys(_self.tableData[rowIndex]);
          // if(
          // _self.tableData[rowIndex][column.property] ==
          //  _self.tableData[rowIndex][keys[columnIndex +1]]){
          //    let rowsspan = 1;
          //    for(let index in _self.tableData[rowIndex]){
          //      if(  _self.tableData[rowIndex][column.property]  
          //      == _self.tableData[rowIndex][index]
          //      && column.property != index
          //      ){
          //        rowsspan ++
          //      }
          //     // console.log( _self.tableData[index][column.property])
          //     // console.log(_self.tableData[rowIndex][column.property])
          //     //  if(  _self.tableData[rowIndex][column.property]  ==){
          //     //    rowsspan ++
          //     //  }
          //    }
            
          //     return [1,rowsspan]
          // }else if(_self.tableData[rowIndex][column.property] ==
          //  _self.tableData[rowIndex][keys[columnIndex -1]]){
          //    return [0,0]
          // }
          //   if(rowIndex == 0 || _self.tableData[rowIndex -1 ][column.property] != row[column.property]){
          //   let rowspan = 0;
          //   for(let index in _self.tableData){
    
          //     if(_self.tableData[index][column.property] == row[column.property]){
          //       rowspan ++
          //     }
          //   }
          //   return [rowspan ,1]
          // }else{
          //   return [0 ,0]
          // }
          
       },
       handleSizeChange(val) {
            let _self = this;
        // console.log(`每页 ${val} 条`);
        // 回去切换一页显示多少条
         _self.$emit("SizeChange",val)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // val当前切换的第几页
              let _self = this;
               _self.$emit("CurrentChange",val)
        }
    }
}
</script>